<template>
  <view class="register">
    <view class="welcome">
      <text>您好</text>
      <text>欢迎注册阿特拉斯卡友之家</text>
    </view>

    <view class="form-body">
      <u--form labelPosition="left" label-width="60px" :model="formData">
        <u-form-item label="手机号" name="phone">
          <u--input
            class="f-input"
            type="text"
            border="bottom"
            placeholder="请输入手机号"
            v-model="formData.phone"
          />
        </u-form-item>
        <u-form-item label="验证码" name="code">
          <u-input placeholder="请输入验证码" border="bottom">
            <template slot="suffix">
              <u-code
                ref="uCode"
                changeText="X秒重新获取"
                :seconds="seconds"
                @change="text => codeBtnText = text"
              ></u-code>
              <u-button
                size="mini"
                :text="codeBtnText"
                @click="getCode"
              ></u-button>
            </template>
          </u-input>
        </u-form-item>
        
        <view class="agreement">
          <view>
            <u-radio-group size="21px" icon-size="14px" v-model="agree">
            	<u-radio></u-radio>
            </u-radio-group>
          </view>
          <view>
            点击完成即表示您同意<text class="a-name">《卡友之家服务协议》</text>
            和<text class="a-name">《卡友之家隐私政策》</text>
          </view>
        </view>
        
        <u-button type="primary" text="注册"></u-button>
      </u--form>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        codeBtnText: '获取验证码',
        seconds: 60,
        agree: false
      }
    },
    methods: {
      getCode() {
        if(this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .register {
    padding: 240rpx 65rpx 0;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;

    .welcome {
      display: flex;
      flex-direction: column;
      font-size: 48rpx;
      line-height: 2;
    }
    
    .agreement {
      display: flex;
      flex-direction: row;
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 60rpx;
      .a-name {
        color: $uni-primary;
      }
    }
  }
</style>